<template>
  <div class="panel">
    <el-row>
      <el-col :span="12">
        <el-button @click="connect">连接</el-button>
      </el-col>
      <el-col :span="12">
        <el-button @click="disconnect">断开</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="12">
        <el-button @click="subscribe1">订阅1</el-button>
      </el-col>
      <el-col :span="6">
        <el-button @click="sendMessage1">发送1</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="message1">
          <template slot="prepend">信息</template>
        </el-input>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="3">
        <el-button @click="subscribe2">订阅2</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="name">
          <template slot="prepend">姓名</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="gender">
          <template slot="prepend">性别</template>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button @click="sendMessage2">发送2</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="message2">
          <template slot="prepend">信息</template>
        </el-input>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="3">
        <el-button @click="subscribe3">订阅3</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="name1">
          <template slot="prepend">姓名</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="gender1">
          <template slot="prepend">性别</template>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button @click="sendMessage3">发送3</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="message3">
          <template slot="prepend">信息</template>
        </el-input>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="3">
        <el-button @click="subscribe31">订阅3.1</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="name2">
          <template slot="prepend">姓名</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="gender2">
          <template slot="prepend">性别</template>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button @click="sendMessage31">发送3.1</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="message4">
          <template slot="prepend">信息</template>
        </el-input>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="12">
        <el-button @click="subscribe4">订阅4</el-button>
      </el-col>
      <el-col :span="6">
        <el-button @click="sendMessage4">发送4</el-button>
      </el-col>
      <el-col :span="6">
        <el-input v-model="message5">
          <template slot="prepend">信息</template>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SockJS from "sockjs-client"
import Stomp from "stompjs"
export default {
  name: 'WebsocketTest',
  props: {
    msg: String
  },
  data(){
    return {
      socket: null,
      order: null,
      message1: null,
      name: "",
      gender: "",
      message2: null,
      name1: null,
      gender1: null,
      message3: null,
      name2: null,
      gender2: null,
      message4: null,
      message5: null
    }
  },
  methods:{
    connect(){
      let sock = new SockJS("/server/ws");
      this.socket = Stomp.over(sock);
      this.socket.connect({}, this.afterConnect, this.connectError)
    },
    disconnect(){
      this.socket.disconnect(()=>{

      })
    },
    afterConnect(){
      console.log("连接成功")
    },
    connectError(){
      console.error("连接失败！")
    },
    subscribe1(){
      this.order = this.socket.subscribe("/topic/subscribe/first", this.afterSubscribe)
    },
    sendMessage1(){
      this.socket.send("/topic/send/first", {}, this.message1 || "nothing")
    },
    subscribe2(){
      this.order = this.socket.subscribe("/topic/subscribe/second")
    },
    sendMessage2(){
      this.socket.send("/topic/send/second/" + this.name + "/" + this.gender, this.afterSubscribe, this.message2 || "nothing")
    },
    subscribe3(){
      this.order = this.socket.subscribe("/topic/subscribe/third", this.afterSubscribe, {name: this.name1, gender: this.gender1})
    },
    sendMessage3(){
      this.socket.send("/topic/send/third", {}, this.message3)
    },
    subscribe31(){
      this.order = this.socket.subscribe("/topic/subscribe/third1", this.afterSubscribe)
    },
    sendMessage31(){
      this.socket.send("/topic/send/third1", {name: this.name2, gender: this.gender2}, this.message4)
    },
    subscribe4(){
      this.order = this.socket.subscribe("/user/topic/order", this.afterSubscribe)
    },
    sendMessage4(){
      this.socket.send("/user/topic/message", {}, this.message5 || "nothing")
    },
    afterSubscribe(m){
      console.log("afterSubscribe", JSON.parse(m.body))
    },
    afterSendMessage(m){
      console.log("afterSendMessage", JSON.parse(m.body))
    }
  },
  beforeDestroy(){
    if(this.socket){
      this.disconnect()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.panel{
  width: 50%;
  background-color: lightgrey;
  margin: auto;
  height: 700px;
  padding: 10px
}
</style>
